<!DOCTYPE html>
<html style="background-color: #F4F4F4;">

	<head>
		<link rel="stylesheet" href="<?php echo APP_TEMPLATES_URL;?>/css/public.css" />
		<style>
			.exchangebnt {
				border-radius: 5px;
				font-size: 16px;
				line-height: 35px;
				color: #000000;
				background: #f0b33e;
				text-align: center;
				width: 100px;
			}
			
			.ltpaixu {
				float: left;
				width: 100%;
				border-bottom: 1px solid #EEEEEE;
				background-color: #ffffff;
			}
			
			.ltpaixu li {
				float: left;
				width: 25%;
				text-align: center;
			}
			
			.ltpaixu li p {
				width: 90%;
				margin: 0 auto;
				line-height: 36px;
				font-size: 15px;
			}
			
			.ltpaixu li p img {
				display: none;
			}
			
			.index p {
				border-bottom: #f9b800 2px solid;
			}
		</style>

		<script type="application/javascript">
			function handleDiv(voucher_state) {
				$('#li_all').removeClass('index');
				$('#li_1').removeClass('index');
				$('#li_2').removeClass('index');
				$('#li_3').removeClass('index');

				$(".voucher_1").css('display', 'none');
				$(".voucher_2").css('display', 'none');
				$(".voucher_3").css('display', 'none');

				if(voucher_state == 0) {
					$('#li_all').addClass('index');
					$(".voucher_1").css('display', 'block');
					$(".voucher_2").css('display', 'block');
					$(".voucher_3").css('display', 'block');
				} else if(voucher_state == 1) {
					$('#li_1').addClass('index');
					$(".voucher_1").css('display', 'block');
				} else if(voucher_state == 2) {
					$('#li_2').addClass('index');
					$(".voucher_2").css('display', 'block');
				} else if(voucher_state == 3) {
					$('#li_3').addClass('index');
					$(".voucher_3").css('display', 'block');
				}
			}
		</script>
	</head>

	<body style="background: #F4F4F4;">

		<!-- 导航 -->
		<div class="mui-bar mui-bar-nav bj">
			<button id="zhuce" class="mui-btn mui-btn-link mui-btn-nav mui-pull-left zys mui-action-back">
			<img style=" max-width: 70%; vertical-align: middle;" src="<?php echo APP_TEMPLATES_URL;?>/images/back.png" />
		</button>
			<button class="mui-btn mui-btn-link mui-btn-nav mui-pull-right zys rigbtn">
			<a style="margin-right: 10px;font-size: 16px;" href="index.php?act=temp&op=coupons_rule">规则</a>
		</button>
			<h1 class="mui-title"><label style="font-size: 22px;vertical-align: middle; line-height: 44px;">优惠券</label></h1>
		</div>

		<section>

			<ul class="ltpaixu">
				<li class="index" id="li_all" style="cursor: pointer" onclick="handleDiv(0)">
					<p>全部</p>
				</li>
				<li class="" style="cursor: pointer" id="li_1" onclick="handleDiv(1)">
					<p>未使用</p>
				</li>
				<li class="" style="cursor: pointer" id="li_2" onclick="handleDiv(2)">
					<p>已使用</p>
				</li>
				<li class="" style="cursor: pointer" id="li_3" onclick="handleDiv(3)">
					<p>已过期</p>
				</li>
			</ul>

			<div style="margin-left: 10px;margin-right: 10px;background-color:#ffffff;" id="voucher_all">
				<?php  if (count($output['list'])>0) { ?>
				<?php foreach($output['list'] as $val) { ?>
				<div style="height: 15px; background: #F4F4F4; clear: both;" class="voucher_<?php echo $val['voucher_state'];?>"></div>
				<div class="voucher_<?php echo $val['voucher_state'];?>">
					<table width="100%" style="height: 132px;">
						<tr>
							<td width="14px">
								<img src="<?php echo APP_TEMPLATES_URL;?>/images/jifen_01.jpg" style="height: 132px;">
							</td>
							<td style="vertical-align: middle;" width="50%" align="center">
								<table style="height: 80%;width: 80%;">
									<tr style="vertical-align: bottom;">
										<td><label style="font-size: 26px;color: #ff5f2f;">¥</label><label style="font-size: 40px;color: #ff5f2f; margin-left: 5px;"><?php echo $val['voucher_price'];?></label></td>
										<td style="vertical-align: middle;font-size: 14px;" align="right">代金券</td>
									</tr>
									<tr style="height: 10px;"></tr>
									<tr style="vertical-align: top;">
										<td colspan="2" style="color: #999999;">每满
											<?php echo $val['voucher_limit'];?>元抵
											<?php echo $val['voucher_price'];?>元</td>
									</tr>
								</table>
							</td>
							<td>
								<img src="<?php echo APP_TEMPLATES_URL;?>/images/jifen_02.jpg" style="height: 132px;">
							</td>
							<td style="vertical-align: middle;" width="40%" align="center">
								<table style="height: 60%;width: 80%;" border="0">
									<tr>
										<td align="center">
											<?php if ($val['voucher_state'] == '1'){?>
											<div class="exchangebnt">立即使用</div>
										</td>
										<?php } elseif ($val['voucher_state'] == '2'){?>
										<div class="exchangebnt" style="background-color: #bbbbbb;">已使用</div>
										<?php } elseif ($val['voucher_state'] == '3'){?>
										<div class="exchangebnt" style="background-color: #bbbbbb;">已过期</div>
										<?php } elseif ($val['voucher_state'] == '4'){?>
										<div class="exchangebnt" style="background-color: #bbbbbb;">已收回</div>
										<?php } ?>
									</tr>
									<tr>
										<td style="vertical-align: top;" align="center">
											<nobr><label style="font-size: 14px;color: #bbbbbb;"><?php echo date("Y.m.d",$val['voucher_start_date']).'-'.date("Y.m.d",$val['voucher_end_date']);?></label>
											</nobr>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</div>
				<?php } } ?>
					
			</div>
			
		</section>
		<?php  if (count($output['list'])==0) { ?>
<p style="text-align: center;margin-top: 50%;font-size: 14px;">暂无可使用优惠劵~！</p>
	<?php }?>
	</body>

</html>